<div class="box box-default">
  <div class="box-body">

    <form class="form-inline" #batchSearchForm="ngForm">
      <div class="box box-default">
        <div class="form-group col-lg-12 col-md-12 col-sm-12 col-xs-12" style="padding-left:0px;margin-bottom:8px !important;">
          <button *ngIf="_.includes(menuResourceSet,'btn-NQDII-ztpc-detail')" type="button" class="btn btn-primary" (click)="showViewDetail()">
            <i class="fa fa-search"></i>查看明细</button>
          <button *ngIf="_.includes(menuResourceSet,'btn-NQDII-pcms-detail')" type="button" class="btn btn-primary" (click)="showViewDetail()">
            <i class="fa fa-search"></i>查看明细</button>
          <button type="button" class="btn btn-box-tool pull-right" data-widget="collapse">
            <i class="fa fa-minus"></i>
          </button>
        </div>
        <div class="box-body">
          <div class="form-group col-lg-12" style="padding-left:0px !important;margin-bottom:8px;">
            <label class="control-label">发起日期：</label>
            <div class="input-group date form_datetime">
              <input class="form-control" type="text" [(ngModel)]="getBody.sOprDateStart" name="sOprDateStart" mwlFlatpickr style="background: white; cursor: pointer;">
            </div>
            <label class="control-label">到：</label>
            <div class="input-group date form_datetime">
              <input class="form-control" type="text" [(ngModel)]="getBody.sOprDateEnd" name="sOprDateEnd" mwlFlatpickr style="background: white; cursor: pointer;">
            </div>
          </div>
          <div class="form-group col-lg-12" style="padding-left:0px !important">
            <label class="control-label">批次区间：</label>
            <input class="form-control" placeholder="" [min]="0" maxlength="9" digits type="text" #nBatchNoStart="ngModel" [(ngModel)]="getBody.nBatchNoStart"
              name="nBatchNoStart">

            <label class="control-label">到：</label>
            <input class="form-control" placeholder="" [min]="0" maxlength="9" digits type="text" #nBatchNoEnd="ngModel" [(ngModel)]="getBody.nBatchNoEnd"
              name="nBatchNoEnd">

            <button type="button" class="btn btn-primary" (click)="searchQuery()" [disabled]="nBatchNoStart.errors?.digits||nBatchNoEnd.errors?.digits">
              <i class="fa fa-search"></i>查询</button>
          </div>
          <div class="form-group col-lg-4" style="padding-left:0px !important">
            <p *ngIf="nBatchNoStart.errors?.digits" class="errorTip" style="padding-left:80px">请输入正整数</p>
          </div>
          <div class="form-group col-lg-4" style="padding-left:0px !important">
            <p *ngIf="nBatchNoEnd.errors?.digits" class="errorTip" style="padding-left:0px">请输入正整数</p>
          </div>
        </div>
      </div>
    </form>
    <div style="overflow-x:scroll;width:100%">
      <table id="fixed-table" class="table table-bordered table-keep-line table-hover table-striped" style="margin-top:unset !important;">
        <thead>
          <tr>
            <th class="width-5">
              <div class="checkbox checkbox-primary">
                <input type="checkbox" id="isCheckedAll" [(ngModel)]="isCheckedAll" name="isCheckedAll" (ngModelChange)="checkedAll()">
                <label>
                </label>
              </div>
            </th>
            <th class="width-8">序号</th>
            <th class="width-7" (click)="orderData('nNjId')">编号<i class="fa fa-sort"></i></th>
            <th class="width-8" (click)="orderData('nBatchNo')">批次号<i class="fa fa-sort"></i></th>
            <th class="width-9" (click)="orderData('sFileName')">文件名称<i class="fa fa-sort"></i></th>
            <th class="width-9" (click)="orderData('sLaunchDate')">发起日期<i class="fa fa-sort"></i></th>
            <th class="width-9" (click)="orderData('sLaunchTime')">发起时间<i class="fa fa-sort"></i></th>         
            <th class="width-9" (click)="orderData('sFlowStepZh')">当前流程<i class="fa fa-sort"></i></th>
            <th class="width-9" (click)="orderData('sOprZh')">处理人<i class="fa fa-sort"></i></th>
            <th class="width-9" (click)="orderData('sOprDate')">处理日期<i class="fa fa-sort"></i></th>
            <th class="width-9" (click)="orderData('sOprTime')">处理时间<i class="fa fa-sort"></i></th>        
            <th class="width-9" (click)="orderData('nBatchNumber')">条目数量<i class="fa fa-sort"></i></th>
          </tr>
        </thead>
        <tr *ngFor="let item of listData;let index = index;" class="sss1">
          <td class="width-5">
            <div class="checkbox checkbox-primary">
              <input type="checkbox" name="checkbox1" [(ngModel)]="item.isChecked" (ngModelChange)="ctrlCheckAll()">
              <label>
              </label>
            </div>
          </td>
          <td class="width-8 short_name" [attr.title]="index+1">{{index+1}}</td>
          <td class="width-7 short_name" [attr.title]="item.nNjId">{{item.nNjId}}</td>
          <td class="width-8 short_name" [attr.title]="item.nBatchNo">{{item.nBatchNo}}</td>
          <td class="width-9 short_name" [attr.title]="item.sFileName">{{item.sFileName}}</td>       
          <td class="width-9 short_name" [attr.title]="item.sLaunchDate">{{item.sLaunchDate}}</td>
          <td class="width-9 short_name" [attr.title]="item.sLaunchTime">{{item.sLaunchTime}}</td>
          <td class="width-9 short_name" [attr.title]="item.sFlowStepZh">{{item.sFlowStepZh}}</td>
          <td class="width-9 short_name" [attr.title]="item.sOprZh">{{item.sOprZh}}</td>
          <td class="width-9 short_name" [attr.title]="item.sOprDate">{{item.sOprDate}}</td>
          <td class="width-9 short_name" [attr.title]="item.sOprTime">{{item.sOprTime}}</td>
          <td class="width-9 short_name" [attr.title]="item.nBatchNumber">{{item.nBatchNumber}}</td>
        </tr>
      </table>
    </div>
    <div class="box-footer clearfix" style="width:100%;">
      <app-pagination [currentPageNum]="listPageInfo.currentPageNum" [pagesShow]="" [totalPages]="listPageInfo.totalPages" (pageChanged)="pageNavigation($event)">
        <div class="pull-left pagination-detail" data-pagination-additional="true">
          <span class="pagination-info">
            当前显示第{{listPageInfo.startRow}}到第{{listPageInfo.endRow}}条，总共{{listPageInfo.total}}条，
          </span>
          <span class="page-list">
            每页记录
            <span class="btn-group dropup">
              <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">
                <span class="page-size">{{listPageInfo.pageSize}}</span>
                <span class="caret"></span>
              </button>
              <ul class="dropdown-menu" role="menu">
                <li *ngFor="let i of listPageInfo.pageList" role="menuitem" [class.active]="listPageInfo.pageSize === i" (click)="sizeChange(i)">
                  <a>{{i}}</a>
                </li>
              </ul>
            </span>
            条
          </span>
        </div>
      </app-pagination>
    </div>
  </div>
</div>

<!-- 查看明细modal -->
<div class="modal modal-detail" id="modal4">
  <div #viewDetail></div>
</div>
<!-- 查看明细modal end -->